<template>
    <div class="transmission-power">
        <el-select id="transmissionPower_edit" v-if="!readOnly" v-model="selectValue" v-bind="$attrs" @change="onChange">
            <div id="transmissionPower_select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </div>
        </el-select>

        <div v-else class="readOnly contentValue_16B" id="transmissionPower">{{ formatDate(selectValue) }}</div>
    </div>
</template>

<script>
export default {
    name: 'TransmissionPower',

    data() {
        return {
            selectValue: '',
            options: [
                {
                    value: 'High',
                    label: this.$t('netWork.wifiSettings.power.high')
                },
                {
                    value: 'Medium',
                    label: this.$t('netWork.wifiSettings.power.medium')
                },
                {
                    value: 'Low',
                    label: this.$t('netWork.wifiSettings.power.low')
                }
            ]
        };
    },

    props: {
        value: {
            require: true,
            type: String
        },
        readOnly: {
            type: Boolean,
            default: false
        }
    },

    mounted() {
        this.setValue(this.value);

        this.selectValue = this.value;
    },

    methods: {
        formatDate(value) {
            const foundOption = this.options.find((option) => option.value === value);
            return foundOption ? foundOption.label : value;
        },

        onChange(value) {
            this.$emit('input', value);
        },

        setValue(value) {
            if (!value) {
                this.selectValue = 'High';
                this.$emit('input', this.selectValue);
                throw new Error('The transmission power value is empty');
            }
        }
    },

    watch: {
        value(val) {
            this.setValue(val);

            this.selectValue = val;
        }
    }
};
</script>
